import * as THREE from 'three';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.js';
import { OutputPass } from 'three/examples/jsm/postprocessing/OutputPass.js';

interface BloomComposerOption {
  renderer: THREE.WebGLRenderer;
  scene: THREE.Scene;
  camera: THREE.Camera;
  /** 编辑器box-id */
  boxId: string;
}

/** 启用轮廓高亮 */
export function useBloom(option: BloomComposerOption): {
  composer: EffectComposer;
  renderPass: RenderPass;
  outlinePass: OutlinePass;
  outputPass: OutputPass;
} {
  const { renderer, scene, camera, boxId } = option;

  const box = document.getElementById(boxId);
  const composer = new EffectComposer(renderer);
  /** 添加通道 */
  const renderPass = new RenderPass(scene, camera);
  const outlinePass = new OutlinePass(new THREE.Vector2(box.clientWidth, box.clientHeight), scene, camera);
  const outputPass = new OutputPass();

  composer.addPass(renderPass);
  composer.addPass(outlinePass);
  composer.addPass(outputPass);

  return {
    composer,
    renderPass,
    outlinePass,
    outputPass,
  };
}
